<template>
	<view class="">
		<u-tabbar :value="tabbarIndex" @change="tabbarChange" activeColor="#276AEE" :border="false">
			<u-tabbar-item text="全部商品" :name="0">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/img/shopIcon/goods-1.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/img/shopIcon/goods.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="我的小店" :name="1">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/img/shopIcon/shop-1.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/img/shopIcon/shop.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="我的订单" :name="2">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/img/shopIcon/order-1.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/img/shopIcon/order.png">
				</image>
			</u-tabbar-item>
		</u-tabbar>

	</view>



</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			tabbarIndex: {
				type: Number,
				required: true,
				default: 0,
			}
		},
		created() {

		},
		methods: {
			tabbarChange(e) {
				console.log(e, 'index');
				const pageNum = getCurrentPages()
				console.log('navigateTo pageNum: ', pageNum.length)
				switch (e) { //fix 直接替换上层堆栈
					case 0:
						uni.redirectTo({
							url: `/pages/pagesMall/mallCenter/mallCenter`
						})
						break;
					case 1:
						uni.redirectTo({
							url: `/pagesMall/myShop/myShop`
						})
						break;
					case 2:
						uni.redirectTo({
							url: `/pagesMall/myOrder/orderList`
						})
						break;
				}


			},
		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 50rpx;
		height: 50rpx;
	}
</style>